<template>
  <div>
    <el-dialog title="添加出库信息" :visible.sync="dialogVisible" width="30%">
      <span>出库日期</span>
      <el-date-picker v-model="dialog.date" type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期" :picker-options="pickerOptions"
      />
      <br/><span>硬件类型</span>
      <el-select v-model="dialog.typeId" placeholder="请选择品牌">.
        <el-option v-for="type in typeInfo" :key="type.id" :label="type.name" :value="type.id"/>
      </el-select>
      <br/><span>硬件型号</span>
      <el-select v-model="dialog.componentId" @focus="getComponent" placeholder="选择型号">
        <el-option v-for="item in componentList" :key="item.id" :label="item.type" :value="item.id"/>
      </el-select>
      <br/><span>销售数量</span>
      <el-input v-model="dialog.quantity" placeholder="placeholder"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDeliver">确 定</el-button>
      </span>
    </el-dialog>
    <el-button type="primary" @click="dialogVisible=true">新建出库</el-button>
    <el-table :data="deliverInfo" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
      <el-table-column prop="date" label="出库日期" sortable/>
      <el-table-column prop="typeId" :formatter="formatType" label="硬件类型"/>
      <el-table-column prop="component.type" label="型号"/>
      <el-table-column prop="quantity" label="销售数量" sortable/>
      <el-table-column prop="adminId" :formatter="formatAdmin" label="操作人"/>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deliverInfo: [{ typeId: 0, componentId: 0, type: '' }],
      typeInfo: [],
      adminInfo: [],
      component: [],
      searchTime: '',
      filterType: '',
      type: '',
      componentList: [],
      dialogVisible: false,
      dialog: {
        id: 0,
        date: '',
        typeId: 1,
        quantity: 0,
        adminId: 1
      },
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  created() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      const that = this
      // 获取所有出库信息
      this.$http.get('/deliver/all').then(value => {
        that.deliverInfo = value.data
      })
      // 获取所有硬件类型
      this.$http.get('/deliver/type/all').then(value => {
        that.typeInfo = value.data
      })
      this.$http.get('/admin/all').then(value => {
        that.adminInfo = value.data
      })
    },
    formatType(row, column, cellValue) {
      return this.typeInfo.find(item => item.id === cellValue).name
    },
    formatAdmin(row, column, cellValue) {
      return this.adminInfo.find(item => item.id === cellValue).name
    },
    getComponent() {
      const that = this
      if (this.dialog.typeId) {
        this.$http.get('/component/all/?typeId=' + that.dialog.typeId).then(value => {
          console.log(value.data)
          that.componentList = value.data
        })
      }
    },
    addDeliver() {
      this.$http.post('/deliver/', this.dialog).then(() => {
        this.dialogVisible = false
        this.refreshData()
      })
    }
  }
}
</script>
